<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script src="spellcheck_test.js"></script>

<script>
// This file shows sample usage of spellcheck_test.js

spellcheck_test(
    '<div contenteditable>|</div>',
    'insertText zz. ',
    '<div contenteditable>#zz#.\u00A0</div>',
    'Mark misspellings after typing.');

spellcheck_test(
    '<div contenteditable>|</div>',
    'insertText You has the right. ',
    '<div contenteditable>You ~has~ the right.\u00A0</div>',
    'Mark ungrammatical phrases after typing.');

spellcheck_test(
    '<div contenteditable>|</div>',
    'insertText orange,zz,apple. ',
    // Grammar marker under the whole sentence, and spelling marker under 'zz'.
    '<div contenteditable>~orange,#zz#,apple.~\u00A0</div>',
    'Mark overlapping grammar and spelling errors.');

spellcheck_test(
    '<textarea>|</textarea>',
    document => {
      document.querySelector('textarea').focus();
      document.execCommand('insertText', false, 'zz. ');
    },
    '<textarea>#zz#. </textarea>',
    'Mark misspellings in <textarea>.');

spellcheck_test(
    '<input type="text">|',
    document => {
      document.querySelector('input').focus();
      document.execCommand('insertText', false, 'asd. ');
    },
    '<input type="text" value="#asd#. ">',
    'Mark misspellings in <input>.');

spellcheck_test(
    '<div contenteditable spellcheck="false">zz. |</div>',
    '',
    '<div contenteditable spellcheck="false">zz. </div>',
    {
      title: 'No marker on misspelled word when spellcheck=false.',
      callback: sample => spellcheck_test(
          sample,
          document => {
            const div = document.querySelector('div');
            div.setAttribute('spellcheck', 'true');
            // Trigger spellchecker by selection change.
            document.getSelection().collapse(div, 0);
          },
          '<div contenteditable spellcheck="true">#zz#. </div>',
          'Marker appears after setting spellcheck=true.'
      )
    });
</script>
